<form action="<?php echo base_url('service/save_order/'.$resv_id); ?>" method="post">
	
    <table class="table table-condensed ">
		<tr>
			<td style="text-align:right;vertical-align:middle;padding-right:20px;max-width:200px;min-width:200px;" class="lead">Services</td>
			<td>
				<table class="table table-condensed table-bordered" style="min-width:1071px;">
					<tr>
						<th>Code</th>
						<th>Name</th>
						<th>Qty</th>
						<th>UOM</th>
						<th>Price</th>
						<th>Total Price</th>
						<th>Action</th>
					</tr>
					<tbody id="list-service">
					<!-- services show here -->
					</tbody>
					<tr>
						<td colspan="5" style="text-align:right;vertical-align:middle;"><b>Total</b></td>
						<td width="170" colspan="2"><div class="controls"><div class="input-prepend"><span class="add-on">Rp</span><input id="total" name="total" type="text" style="width:120px;" disabled></div></div></td>
					</tr>
				</table>
				
				<div class="input-prepend input-append">
					<span class="add-on">Add</span>
					<input id="add-more" type="text" style="width:30px;" value="1">
					<span class="add-on">service</span>
					<a class="btn btn-primary" type="button" onclick="add_service();">Go!</a>
				</div>
				<a class="btn btn-warning pull-right" type="button" onclick="delete_all_service();">Remove all</a>
			</td>
		</tr>
		<tr>
			<td style="text-align:right;vertical-align:middle;padding-right:20px;" class="lead">Location</td>
			<td><input name="room-name" type="text"></td>
		</tr>
		<tr>
			<td style="text-align:right;vertical-align:middle;padding-right:20px;" class="lead">Order Time*</td>
			<td>
				<div id="datetimepicker1" class="input-append">
					<input id="ord-time" name="ord-time" data-format="dd-MM-yyyy hh:mm:ss" type="text" required>
					<span class="add-on"><i data-time-icon="icon-time" data-date-icon="icon-calendar"></span>
				</div>
			</td>
		</tr>
		<tr>
			<td style="text-align:right;vertical-align:middle;padding-right:20px;" class="lead">Order Desc</td>
			<td><textarea name="ord-desc" maxlength="50"></textarea></td>
		</tr>
		<tr>
			<td style="text-align:right;vertical-align:middle;padding-right:20px;" class="lead">Discount</td>
			<td>
				<div class="radio span2"><input type="radio" name="disc" value="percent">Percent</div>
				<div class="radio"><input type="radio" name="disc" value="nominal">Nominal</div>
				<br>
				<div class="input-append" id="input-percent" style="display:none">
                    <input id="disc-percent" name="disc-percent" class="percent" type="text" style="text-align:right;">
                    <span class="add-on">%</span>
                </div>
				<div class="input-prepend" id="input-nominal" style="display:none">
					<span class="add-on">Rp</span>
                    <input id="disc-nominal" name="disc-nominal" class="rp" type="text" style="text-align:right;">
                </div>
				<br>
			</td>
		</tr>
		<tr>
			<td style="text-align:right;vertical-align:middle;padding-right:20px;" class="lead">PPN Tax</td>
			<td>
				<div class="input-append">
                    <input id="ppn-tax" name="ppn-tax" class="percent" type="text" style="text-align:right;">
                    <span class="add-on">%</span>
                </div>
			</td>
		</tr>
		<tr>
			<td style="text-align:right;vertical-align:middle;padding-right:20px;" class="lead">Service Tax</td>
			<td>
				<div class="input-append">
                    <input id="serv-tax" name="serv-tax" class="percent" type="text" style="text-align:right;">
                    <span class="add-on">%</span>
                </div>
			</td>
		</tr>
		<tr>
			<td style="text-align:right;vertical-align:middle;padding-right:20px;" class="lead">Grand Total</td>
			<td>
				<input name="grand-total" class="rp" type="hidden">
				<div class="input-prepend">
					<span class="add-on">Rp</span>	
                    <input id="grand-total" class="rp" type="text" style="text-align:right;" disabled>
                </div>
			</td>
		</tr>
		<tr>
			<td style="text-align:right;vertical-align:middle;padding-right:20px;" class="lead">Bill Type*</td>
			<td>
				<label class="radio">
					<input type="radio" name="bill-type" value="On Spot" required>On Spot
				</label>
				<label class="radio">
					<input type="radio" name="bill-type" value="Reservation" required>Reservation
				</label>
			</td>
		</tr>
        <tr id="guest" style="display:none">
            <td style="text-align:right;vertical-align:middle;padding-right:20px;" class="lead">Guest*</td>
            <td>
				<input type="hidden" name="resv-id" id="resv-id" value="<?php if($resv_id != null) echo $resv_id; ?>">
				<div class="input-prepend input-append">
				<input type="text" id="guest-name" class="input" value="<?php if($resv_id != null) echo $resv['guest_name']; ?>" disabled> <a class="btn btn-success" href="javascript:void(0)" onclick="guestSearch();" >
				<i class="icon-search icon-white  "></i></a>
				</div>
			</td>
        </tr>
        <tr id="payment-type" style="display:none">
            <td style="text-align:right;vertical-align:middle;padding-right:20px;" class="lead">Payment Type*</td>
            <td>
                <select name="paym-type">
                    <?php
						foreach($paym_type as $pt) {
							echo '<option value="'.$pt['payment_id'].'">'.$pt['payment_name'].'</option>';
						}
					?>
                </select> 
            </td>
        </tr>
		<tr id="card-code" style="display:none">
			<td style="text-align:right;vertical-align:middle;padding-right:20px;" class="lead">Card/Voucher Code</td>
			<td><input name="card-code" type="text" maxlength="20"></td>
		</tr>
		<tr id="paid" style="display:none">
			<td style="text-align:right;vertical-align:middle;padding-right:20px;" class="lead">Paid*</td>
			<td>
				<div class="input-prepend">
					<span class="add-on">Rp</span>	
                    <input name="paid" class="rp" type="text" style="text-align:right;">
                </div>
			</td>
		</tr>
    </table>
	<?php 
		if($resv_id != null) echo '<a class="btn" href="'.base_url('reservation/service/'.$resv_id).'" >Cancel</a>';
		else echo '<a class="btn" href="'.base_url('service/order').'" >Cancel</a>';
	?>
    <input type="submit" class="btn btn-primary" value="Proccess Order" onclick="post();">
</form>


<script>
var id_service = 0;
var rp = {aSep: '.',aDec: ',',vMin: '0.00',vMax: '999999999999.99'};
var qty = {aSep: '',aDec: ',',vMin: '0.00',vMax: '99999.999'};
var percent = {aSep: '',aDec: ',',vMin: '0.00',vMax: '100.00'};

$(document).ready(function(){
	add_service();
	$('.percent').autoNumeric('init',percent);
	$('input[name="bill-type"]').change(function(id) {bill_type_status(id);});
	$('input[name="disc"]').change(function(id) {discount(id);});
	$('#serv-tax,#ppn-tax,#disc-percent,#disc-nominal,input[name="disc"]').change(function() {count_final_total();});
	
	 $('#datetimepicker1').datetimepicker({
      language: 'en',
	  pickSeconds: false
    });
});

function add_service() {

	for(var i=0;i<$('#add-more').val();i++){
		
		id_service++;
		var service = '<tr id="serv-'+id_service+'">';
		service += '<input id="serv-id-'+id_service+'" name="serv-id[]" type="hidden">';
		service += '<td width="60px"><input id="serv-code-'+id_service+'" type="text" style="width:50px;" disabled></td>';
		service += '<td><div class="controls"><div class="input-prepend"><span class="add-on"><i class="icon-search"></i></span><input id="serv-name-'+id_service+'" type="text" style="width:270px;" required></div></div></td>';
		service += '<td width="90"><input id="serv-qty-'+id_service+'" name="serv-qty[]" class="qty" type="text" style="width:75px;" title="" required></td>';
		service += '<td width="140"><input id="serv-uom-'+id_service+'" type="text" style="width:130px;" disabled></td>';
		service += '<td width="170"><input type="hidden" id="price-'+id_service+'" name="serv-price[]"><div class="controls"><div class="input-prepend"><span class="add-on">Rp</span><input id="serv-price-'+id_service+'" class="rp" type="text" style="width:120px;" disabled></div></div></td>';
		service += '<td width="170"><div class="controls"><div class="input-prepend"><span class="add-on">Rp</span><input id="serv-totprice-'+id_service+'" class="rp" type="text" style="width:120px;" disabled></div></div></td>';
		service += '<td width="30"><a class="btn btn-warning" title="Remove service" onclick="delete_service('+id_service+');"><i class="icon-remove icon-white"></i></a></td>';
		service += '</tr>';
		
		$('#list-service').append(service);
		$('.rp').autoNumeric('init',rp);
		$('.qty').autoNumeric('init',qty);
		
		init_autocomplete(id_service);
		
		$('#serv-qty-'+id_service).change(function() {
			count_total();
			count_grand_total();
		});
	}
	
}

function delete_service(id) {
	$('#serv-'+id).remove();
	count_grand_total();
}

function delete_all_service() {
	$('#list-service').empty();
	add_service();
	$('#grand-total').val('');
}

function init_autocomplete(id_service) {
	var ac_config = {
		source: "<?php echo site_url('service/auto_suggestion'); ?>",
		select: function(event, ui){
			$('#serv-id-'+id_service).val(ui.item.service_id);
			$('#serv-code-'+id_service).val(ui.item.service_code);
			$('#serv-uom-'+id_service).val(ui.item.service_uom);
			$('#price-'+id_service).val(ui.item.service_sell_price);
			$('#serv-qty-'+id_service).autoNumeric('destroy');
			$('#serv-qty-'+id_service).autoNumeric('init', {aSep: '.',aDec: ',',vMin: '0.00',vMax: ui.item.service_qty});
			$('#serv-qty-'+id_service).autoNumeric('set', 0);
			$('#serv-qty-'+id_service).attr('title', 'Max Qty: '+number_format(ui.item.service_qty,3,',','.'));
			$('#serv-price-'+id_service).autoNumeric('set', ui.item.service_sell_price);
			$('#serv-totprice-'+id_service).autoNumeric('set', 0);
		},
		minLength:1
	};
	
	$('#serv-name-'+id_service).autocomplete(ac_config);
}

function count_total() {
	
	//$('#serv-totprice-'+id).autoNumeric('set', parseFloat($('#serv-price-'+id).autoNumeric('get'))*parseFloat($('#serv-qty-'+id).autoNumeric('get')));
	var qty = new Array();
	$('input[id*="serv-qty"]').each(function() {
		qty.push(parseFloat($(this).autoNumeric('get')));
	});
	var price = new Array();
	$('input[id*="serv-price"]').each(function() {
		price.push(parseFloat($(this).autoNumeric('get')));
	});
	$('input[id*="serv-totprice"]').each(function() {
		$(this).autoNumeric('set', qty.shift()*price.shift());
	});
	
}

function count_grand_total() {
	$('#total').autoNumeric('init',rp);
	$('#grand-total').autoNumeric('init',rp);
	var total = 0;
	$('input[id*="serv-totprice"]').each(function() {
		total += parseFloat($(this).autoNumeric('get'));
	});
	$('#total').autoNumeric('set', total);
	count_final_total();
}

function count_final_total() {
	if($('input[name="disc"]').filter('[value="percent"]').is(':checked')){
		var total = parseFloat($('#total').autoNumeric('get')) - (parseFloat($('#total').autoNumeric('get')) * parseFloat($('#disc-percent').autoNumeric('get')) / 100);
	}
	else if($('input[name="disc"]').filter('[value="nominal"]').is(':checked')) {
		var total = parseFloat($('#total').autoNumeric('get')) - parseFloat($('#disc-nominal').autoNumeric('get'));
	}
	else {
		var total = parseFloat($('#total').autoNumeric('get'));
	}
	
	var grand_total = total + (total * parseFloat($('#ppn-tax').autoNumeric('get')) / 100) + (total * parseFloat($('#serv-tax').autoNumeric('get')) / 100)
	$('#grand-total').autoNumeric('set', grand_total);
	$('input[name="grand-total"]').val(grand_total);
}

function bill_type_status(id) {
	if($(id.target).val() == 'Reservation'){
		$('#guest').css('display','table-row');
		$('#payment-type').css('display','none');
		$('#card-code').css('display','none');
		$('#paid').css('display','none');
		$('#resv-id').attr('required', 'required');
		$('input[name="paid"]').removeAttr('required');
	} else{
		$('#guest').css('display','none');
		$('#payment-type').css('display','table-row');
		$('#card-code').css('display','table-row');
		$('#paid').css('display','table-row');
		$('#resv-id').removeAttr('required');
		$('input[name="paid"]').attr('required', 'required');
	}
}

function discount(id) {
	if($(id.target).val() == 'percent'){
		$('#input-percent').css('display','table-row');
		$('#input-nominal').css('display','none');		
	} else{
		$('#input-percent').css('display','none');
		$('#input-nominal').css('display','table-row');
	}
}

function post(e) {

	if($('input[name="bill-type"][value="Reservation"]').is(':checked') && $('#resv-id').val() == ''){	
		alert('Please choose Guest first');
		event.preventDefault();
	}
	else{
		var a=window.confirm('Are you sure that you want to proccess this order?\nRemember, Proccessed order cannot be edited');
		if(!a) {
			event.preventDefault();
			return false;
		}
	}
}

 function guestSearch() {
	if($('#ord-time').val() != '') {
		window.open('<?php echo site_url('service/guest_search'); ?>/'+encodeURI($('#ord-time').val()), '', 'toolbar=no,location=no,menubar=no,scrollbars=yes,width=850,height=500');
	}
	else {
		$('#ord-time').focus();
	}
}

</script>
